<template>
	<view class="page flex flex-direction">
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
		</cu-custom>
		<view class="flex-sub" style="overflow-y: scroll;">
			<view class="bg-white shadow margin radius padding-lr">
				<view class="padding-tb solids-bottom text-xl text-black text-bold">
					隐患详情
				</view>
				<view class="padding-tb">
					<view class="text-lg text-black text-bold">
						{{danger.projectName}}
					</view>
					<view class="margin-top-xs" v-if="danger.title">
						检查标题：{{danger.title}}
					</view>

					<view class="margin-top-xs" v-if="danger.subject">
						检查内容：{{danger.subject}}
					</view>

					<view class="margin-top-xs text-red" style="" v-if="danger.contentDesc">
						隐患描述：{{danger.contentDesc}}
					</view>

					<!-- 附件列表 -->
					<view class="grid col-4 grid-square flex-sub margin-top-xs" v-if="danger.attachInfos && danger.attachInfos.length>0">
						<view class="bg-img" v-for="(imgItem,imgIndex) in danger.attachInfos" :key="imgIndex" @tap="ViewImage" :data-src="baseUrl+imgItem.attchPath"
						 :data-type="imgItem.type">
							<image :src="baseUrl+imgItem.attchPath" v-if="imgItem.type=='jpg'" mode="aspectFill"></image>
							<image src="../../static/patrol/patrol_mobile_device_default_video.png" v-if="imgItem.type=='mp4'" mode="aspectFill"></image>
						</view>
					</view>

					<view class="margin-top-xs cf">
						<view class="fl">
							{{danger.reportEmployeeName}}
						</view>
						<view class="fr">
							{{danger.reportTime|formatTime}}
						</view>
					</view>
				</view>
			</view>

			<view class="bg-white shadow margin radius padding-lr" v-if="flowArray.length>0">
				<view class="padding-tb solids-bottom text-xl text-black text-bold">
					处理流程
				</view>
				<view class="padding-tb">
					<view class="flex" v-for="(item,index) in flowArray" :key="index">
						<view class="text-right margin-top" style="width: 80px;">
							{{item.processingTime|formatTime}}
						</view>
						<view class="time_line">

						</view>
						<view class="flex-sub flex flex-direction margin-top">
							<view class="margin-bottom-xs text-black" v-if="item.stepEmployeeName">
								{{item.stepEmployeeName}}
							</view>
							<view class="margin-bottom-xs" v-if="item.processingStep">
								步骤：{{item.processingStep}}
							</view>
							<view class="margin-bottom-xs" v-if="item.processingMethod">
								方式：{{item.processingMethod}}
							</view>
							<view class="margin-bottom-xs" v-if="item.handlingOpinions">
								意见：{{item.handlingOpinions}}
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>


		<view class="cu-modal" :class="modelVideo.show?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">播放视频</view>
					<view class="action" @tap="clickHideModel">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view class="" style="margin: 0 10px;">
						<video :src="modelVideo.src" controls style="width: 100%;" :style="{'height':modelVideo.show?'200px':'0px'}"></video>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../util/apis/api-patrol.js'
	import ui from '../../util/ui.js'
	import constant from '../../util/constant.js'


	let that = null;
	export default {
		filters: {
			formatTime: function(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				month = (month < 10 ? '0' + month : month);
				let day = date.getDate();
				day = (day < 10 ? '0' + day : day);
				let hour = date.getHours();
				hour = (hour < 10 ? '0' + hour : hour);
				let min = date.getMinutes();
				min = (min < 10 ? '0' + min : min);
				let sec = date.getSeconds();
				sec = (sec < 10 ? '0' + sec : sec);
				return year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + sec;
			}
		},
		data() {
			return {
				baseUrl: constant.baseUrl,
				modelVideo: {
					show: false,
					src: ''
				},
				danger: {},
				flowArray: []
			}
		},
		onLoad(options) {
			that = this;
			let danger = JSON.parse(decodeURIComponent(options.danger));
			// 解决附件类型问题
			let attachementInfos = danger.attachInfos;
			if (attachementInfos) {
				for (let j = 0; j < attachementInfos.length; j++) {
					let attach = attachementInfos[j];
					let path = attach.attchPath;
					if (path.indexOf('.mp4') >= 0) {
						attach.type = 'mp4'
					} else {
						attach.type = 'jpg'
					}
				}
			}
			that.danger = danger;
			// 获取处理流程列表
			api.getDangerFlowList(danger.id)
				.then(res => {
					that.flowArray = res;
				})
				.finally(() => {

				});
		},
		mounted() {
			// 获取数据

		},
		methods: {
			// ———————————————————点击事件—————————————————————
			/**
			 * 点击预览图片、视频
			 */
			ViewImage: function(e) {
				let type = e.currentTarget.dataset.type;
				let src = e.currentTarget.dataset.src;
				if (type == 'jpg') {
					uni.previewImage({
						urls: [src]
					})
				} else if (type == 'mp4') {
					// 使用模态框预览视频
					that.modelVideo.show = true;
					that.modelVideo.src = src;
				}
			},
			/**
			 * 点击隐藏视频预览的模态框
			 */
			clickHideModel: function() {
				that.modelVideo.show = false;
				that.modelVideo.src = '';
			}
		}
	}
</script>

<style>
	.time_line {
		width: 2px;
		background-color: #007AFF;
		margin: 0 10px;
		position: relative;
	}

	.time_line::after {
		content: ' ';
		width: 8px;
		height: 8px;
		position: absolute;
		left: 50%;
		top: 20px;
		transform: translateX(-50%);
		background-color: #007AFF;
		border-radius: 50%;
	}
</style>
